<template>
<div style="height:100%">
  <div class="buttonarea">
    <label>选择时间</label>
    <el-radio-group v-model="radio" style="margin:12px">
    <el-radio :label="0">全部</el-radio>
    <el-radio :label="1">近3天</el-radio>
    <el-radio :label="2">近一周</el-radio>
    <el-radio :label="3">近一月</el-radio>
  </el-radio-group>
  </div>
  <div>
     
  <el-table
    :data="tableData2"
    style="width: 100%"
    max-height="600">
   
  <el-table-column
    fixed
     align="center"
      label="保单编号"
       prop="id"
     >
    </el-table-column>
    <el-table-column
    fixed
     align="center"
      label="损失类型"
       :formatter="formatleixing"
      prop="sunshileixing">
    </el-table-column>
    <el-table-column
    fixed
     align="center"
      label="预计损失"
     
      prop="sunshi">
    </el-table-column>
     <el-table-column
    fixed
     align="center"
      label="被保险人"

      prop="username">
    </el-table-column>
    <el-table-column
    fixed
     align="center"
      label="状态"
     :formatter="formatstatus"

      prop="recordstatus"
     >

    </el-table-column>
     <el-table-column
    fixed
     align="center"
      label="申请时间"
      :formatter="getNowFormatDate2"
      prop="recordcreatetime">
    </el-table-column>
     <el-table-column
    fixed
     align="center"
      label="录入时间"
       :formatter="getNowFormatDate3"
       prop="create_time"
     >
    </el-table-column>
    <el-table-column
    fixed
     align="center"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="record=scope.row;record.img=JSON.parse(scope.row.images);tzshow=true" type="text" size="small">查看理赔资料</el-button>
        <!-- <el-button type="text" @click="stopmember(scope.row.id,scope.row.index)" v-if="scope.row.status!=3&&scope.row.status!=4" size="small">停止服务</el-button> -->
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
  title="查看理赔资料"
  :visible.sync="tzshow"
  width="50%"
  >
  <span>
<div style="line-height: 25px;margin:20px; text-align:left">
						 <p  >损失类型：<span id='sunshileixing' >{{record.sunshileixing==1?'人伤':(record.sunshileixing==2?'物损':'车损')}}</span></p>
						 <p  >出险原因：<span id='reason'>{{record.reason}}</span></p>
						 <p   >时间：<span id='eventtime' >{{getNowFormatDate(record.eventtime)}}</span></p>
						 <p  >事故地点： <span id='eventaddress' >{{record.eventaddress==0?'境内':'境外'}}</span></p>
						 <p  >事故经过：<span id='eventdetail'>{{record.description}}</span></p>
						 <p  >预计损失：<span id='sunshi'>{{record.sunshi}}</span>元人民币</p>
						 <p  >报案人：<span id='people' >{{record.people}} </span><span id='phone'>{{record.phone}}</span></p>
						 <p id='bank'>收款银行信息：<span id='huming'>{{record.huming}}</span> <span id='card'>{{record.zhanghu}}</span> <span id='bankname'>{{record.kaihuhang}}</span></p>
	
						  <p>身份证正反面</p>
						  <img id='carda' class="imgdx" :src="record.img.carda.src">
						  <img id='cardb' class="imgdx" :src="record.img.cardb.src">
						  <p>快速理赔表</p>
						  <div id='kslpb'> <img v-for="(item,index) in record.img.kslpb" :key="index" class="imgdx" :src="item.src"> </div>
						 
						  <p>赔付协议</p>
						  <div id='pfxy' ><img v-for="(item,index) in record.img.pfxy" :key="index" class="imgdx" :src="item.src"> </div>
						 
						 <p>损失情况</p>
						   <div id='ssqk' ><img v-for="(item,index) in record.img.ssqk" :key="index" class="imgdx" :src="item.src"> </div>
						  <p>其他</p>
						   <div id='qt' ><img v-for="(item,index) in record.img.qt" :key="index" class="imgdx" :src="item.src"> </div>
						 
						 </div>


  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="tzshow = false">取 消</el-button>
    <el-button type="primary" @click="tzshow = false">确 定</el-button>
  </span>
</el-dialog>
  
 <div class="block">
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="10"
      background
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div> 
  </div>
  </div>
</template>

<script>
import { getmembers,unlockmember,stopmember } from '@/api/policy'

import $ from 'jquery'
import { switchCase, switchStatement } from '@babel/types';
export default {
  name: 'lpsqlb',
  components: { },
    computed: {
  },
  data() {
    return {
      record:{img:{carda:{},cardb:{},ssqk:[],qt:[],pfxy:[],kslpb:[]} },
      radio: 0,
      page:1,
      size:100,
      page:1,
      status:'',
      total:0,
      input5:'',
      select:'0',
      tzshow:false,
      typevalue:'0',
      state:'0',
      searchtag:"0",
    tableData2: [  ],


    }
      
  },
  components:{


  },
  mounted(){
this.getlplb();

  },
  methods:{
    
      getNowFormatDate2(row) {
        var dt=row.recordcreatetime;
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
     getNowFormatDate3(row) {
        var dt=row.create_time;
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
         formatstatusofrecord(status){
//0（资料不全)刚提交 1审核中 2已赔付 3 已被拒 4 旅行机构审核中 5机构审核通过 6 机构审核拒绝 7超管审核通过
     if(status==0)
     return '资料不全'
     else if(status==1)
       return '审核中'
            else if(status==2)
       return '已赔付'
            else if(status==3)
       return '已被拒'
            else if(status==4)
       return '客户公司审核中'
            else if(status==5)
       return '机构审核通过'
            else if(status==6)
       return '机构审核拒绝'
           else if(status==7)
       return '超管审核通过'

    },
    formatstatus(row){
     var status=row.recordstatus;
     return this.formatstatusofrecord(status)
    },
    formatleixing(row){
        var type= row.sunshileixing;
        if(type==1)
        return '人伤'
                if(type==2)
        return '物损'
                if(type==3)
        return '车损'
      
    },
    handleClose(){

    },
    getlplb(){
      this.$loadingshow();
       var that=this;
$.ajax({
        async : true,    //琛ㄧず璇锋眰鏄惁寮傛澶勭悊
        type : "get",    //璇锋眰绫诲瀷
        url : "/dev-api/mapi/user/getrecordsforcheckforcustomer",//璇锋眰鐨�URL鍦板潃
        dataType : "json",//杩斿洖鐨勬暟鎹被鍨�
        data:{
        customerid:0,
        page:that.page,
        size:that.size,
        status:5
        },
        success: function (data) {
         that.$loadingclose();
        //  console.log(data);  //鍦ㄦ帶鍒跺彴鎵撳嵃鏈嶅姟鍣ㄧ杩斿洖鐨勬暟鎹�
           if(data.code==200)
           {
             that.total=data.result.length;
              that.tableData2=data.result;
              // for(var i=0;i<data.result.length;i++)
              //     {
              // var temp=recorditem;
              // temp=temp.replace('[orderid]',data.result[i].orderid);
              //      if(data.result[i].sunshileixing==1)
              //      temp=temp.replace('[locationtype]','人伤');
              //      if(data.result[i].sunshileixing==2)
              //      temp=temp.replace('[locationtype]','物损');
              //      if(data.result[i].sunshileixing==3)
              //      temp=temp.replace('[locationtype]','车损');
              //      temp=temp.replace('[route]','');
              //      temp=temp.replace('[lzxper]',data.result[i].sunshi);
              //   //    temp=temp.replace('[ywxper]',data.result[i].username);
              //      temp=temp.replace('[people]',data.result[i].people);
              //       temp=temp.replace('[dt]',df(data.result[i].recordcreatetime));
              //       temp=temp.replace('[dt]',df(data.result[i].recordcreatetime));
              //        temp=temp.replace('[reason]',data.result[i].jigouhao?data.result[i].jigouhao:'');
              //             temp=temp.replace('[index]',data.result[i].orderid);
              //        console.log('sta:');
              //     //   alert("st:"+data.result[i].recordstatus);
              //        if(data.result[i].recordstatus=='4')
              //         temp=temp.replace('[status]','未确认');
              //         else if(data.result[i].recordstatus=='5')
              //         temp=temp.replace('[status]','审核通过');
              //         else if(data.result[i].recordstatus=='6')
              //         temp=temp.replace('[status]','审核被拒');
              //          else 
              //         temp=temp.replace('[status]','未确认');
              //          temp=temp.replace('[index]',i);
              //       temp=temp.replace('[index]',i);
              //             temp=temp.replace('[index]',i);
              //       $('#records').append(temp);
              //      }
                     
                }
           else
           {
             that.$toast(data.message);
           }
          
      
        },
        error:function (data) {
        that.$loadingclose();
            that.$toast("服务器异常 ");
            
        }
    });



    },
     addlead(){
    this.$router.push("addleadofself")
  },
    gosearch()
    {
    this.page=1;
    this.total=0;
    this.searchtag=1;
    this.getmembers();



    },
      reset()
    {
    this.page=1;
    this.total=0;
    this.searchtag=0;
    this.getmembers();



    },
         getNowFormatDate(dt) {
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
      getmembers(){

this.$loadingshow();
       getmembers({ page:this.page,searchtag:this.searchtag,size:10,customertype:this.typevalue,key:this.select,keyword:this.input5,key2:this.state }).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
              this.tableData=res.result.list;
              this.total=res.result.total;
              for(var i=0;i<this.tableData.length;i++)
              {
                   this.tableData[i].index=i;
                   this.tableData[i].typedesc=this.tableData[i].type==1?'重点':'普通'
                   

              }
           //   document.getElementsByClassName('el-table__body-wrapper')[0].style.height='auto';
        } 
        else{
          this.$toast(res.message)
        }
      });
    },
    addcustomer(){
      this.$router.push('addcustomer');
    },
    genjin(row){
      this.$router.push('genjin?id='+row.id+'&name='+row.username);
    },
    toadd(value){
    // this.$router.push('addpolicy');
    window.open('http://chudan.zhiyuewulian.com');
    },
    filterTag(){

    },
handleSizeChange(){

},
convert(status)
{
     if(status==1)
               {
status= '新客户';

               }
               if(status==2)
               {
status= '沟通中';

               }
                         if(status==3)
               {
status= '有意向';

               }
              if(status==4)
               {
status= '成交几率高';

               }
                         if(status==5)
               {
status= '即将购买';

               }
                         if(status==6)
               {
status= '完成购买';

               }
                         if(status==7)
               {
status= '无意向';

               }
                          if(status==8)
               {
status= '已解锁';

               }
               return status;
},
handleCurrentChange(){
     this.getlplb();
},
handleClick(id,index) {
        //this.$router.push('chakan');
        this.$loadingshow();
       unlockmember({id:id }).then(res => {
           this.$loadingclose();
        if (res.code == 200) {
          this.tableData[index].status=8;
          this.$toast('解锁成功')
        } 
        else{
          this.$toast(res.message)
        }
      });
      },
      handleClickread(row) {
        this.$router.push('chakan?id='+row.id);
      },
      stopmember(id,index){

       this.$loadingshow();
       stopmember({id:id }).then(res => {
           this.$loadingclose();
        if (res.code == 200) {
          this.tableData[index].status=3;
          this.$toast('停止成功')
        } 
        else{
          this.$toast(res.message)
        }
      });


      }
  }
}
</script>

<style lang="scss" scoped>
.buttonarea{
  width:90%;
  padding: 20px;
  // height: 50px;
}
.btn{
  position: relative;
    /* left: 73%; */
    float: right;
    right: 9px;
    margin-top: 6px;
}
.block{
      text-align: center;
      margin-top:10px;
}

.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 30%;
    }
    .userfile{
    width: 90px;
    height: 30px;
    background: cornflowerblue;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
/deep/  .el-input--suffix .el-input__inner{
  width:150px;
}
/deep/ .el-form-item{
  width: 20%;
}
</style>
<style type="text/css">
.imgdx{
	width: 200px;
	height: auto;
}
    .popPosition {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    #pop-container {
        display: none;
        z-index: 999;
    }
	#pop-container2 {
        display: none;
        z-index: 999;
    }
    /*遮盖层*/
    #cover-tier {
        background-color: #D9D9D9;
        opacity: 0.5;
    }
    /*弹出层内容*/
    #pop-tier {
        width: 550px;
        height: 350px;
        border: 5px solid #C3C3C3;
        background-color: #fff;
        margin: auto;
        text-align: center;
    }
	#pop-tier2 {
        width: 550px;
        height: 550px;
		overflow-x: hidden;
		overflow-y: auto;
        border: 5px solid #C3C3C3;
        background-color: #fff;
        margin: auto;
        text-align: center;
    }
    /*关闭弹框*/
    #close-pop {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }
    </style>
